<template>
  <div>
    
    <img src="./assets/logo.png" alt="logo">
    <h2>{{msg}},学生姓名是：{{studentName}}</h2>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <school :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法@或v-on） -->
    <student @click.native="show" @atguigu="getStudentName" @demo="m1"/>  <!-- 用native修饰,就是原生事件 -->
    <!-- <student v-on:atguigu.once="getStudentName"></student> 只触发一次-->  
     <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法ref） -->
    <!-- <student ref="student"></student> -->
  </div>
</template>

<script>
    // 引入组件
    import School from './components/School.vue'
    import Student from './components/Student.vue'
    export default {
        name:'App',
        // 注册组件
        components:{
            School,
            Student
        },
        data(){
            return{
              msg:'你好啊',
              studentName:''
            }
        },
        methods:{
            getSchoolName(name){
              console.log('我收到了school的name',name);
            },
            getStudentName(name){
              console.log('我收到了student的name',name);
              this.studentName=name
            },
            m1(){
              console.log('demo函数被调用了');
            },
            show(){
              alert(123)
            }
        },
        //生命周期函数，挂载完毕调用该函数
        mounted(){
          //先用ref获取组件实例对象（VC）,在给组件实例对象绑定自定义事件
          // this.$refs.student.$on('atguigu',this.getStudentName)
          // this.$refs.student.$once('atguigu',this.getStudentName) //只触发一次事件
        }
    }
</script>

<style>

</style>